import {Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output} from "@angular/core";

declare var $: any;

@Component({
  selector: "tool-tip",
  template: `
    <div class="tag">
      <div class="arrow">
        <em></em><span></span>
      </div>
      <div class="zt">
        {{o}}
      </div>
    </div>
  `,
  styles: [
    ".tag {z-index: 2; position: absolute;top: -32px;right:15px;width: 230px;height: 30px;border: 2px solid #f29999;background-color:#fff4f4;border-radius: 5px;}",
    ".arrow {position: absolute;width: 20px;height: 30px;bottom: -30px;left: 50px;}",
    ".arrow * {display: block;border-width: 10px;position: absolute;border-style: solid dashed dashed dashed;font-size: 0;line-height: 0;}",
    ".arrow em {border-color: #f78a8a  transparent transparent;}",
    ".arrow span {border-color: #fbe6e6 transparent transparent;top: -3px;}",
    ".zt{text-align: center;font-size: 14px;margin: 3px 10px;color:#f24c4c;}",
  ]
})
export class TooltipComponent implements OnInit {
  @Input() o: any;

  constructor() {

  }

  ngOnInit(): void {
    console.log(this.o);
  }

}
